<template>
  <div class="section-box">
    <FrameLayout>
      <template v-slot:left>
        <Frame :title="loadList ? '预案' : '预演预案'" style="height: 100%" :menuName="'yuan'">
          <template v-slot:body>
            <div class="tab" v-if="loadList">
              <span v-for="(item, index) in leftTopList" :key="index"
                :class="{ activeTab: selectNumLeft == item.ind, tabwid50: !taboneflg }" class="tabTit"
                @click="LeftChange(item.ind)">
                {{ item.titName }}
              </span>
            </div>
            <!-- 预案可视化 -->
            <div class="visualizationLeftTitle " v-if="selectNumLeft == 0 && loadList"> 预案管理 </div>
            <el-row v-if="selectNumLeft == 0 && loadList">
              <el-col :span="24">
                <div class="grid-content bg-purple m-t-5 yyTotalNum">流域内预案共计：<span>{{ dataCountNum }}</span></div>
              </el-col>
              <el-col :span="24">
                <el-col :span="20">
                  <div class="grid-content bg-purple-light" style="background: none; padding: 0; ">
                    <!-- <el-input v-model="formRule.adnm" placeholder="请输入内容" @change="bisualiBtn"> <el-button slot="append"
                      icon="el-icon-search" />
                  </el-input> -->
                    <el-input v-model="formRule.adnm" placeholder="请输入内容" @change="bisualiBtn" style="90%" clearable>
                    </el-input>
                  </div>
                </el-col>
                <el-col :span="4" style="display:flex; justify-content:center; align-items:center">
                  <img src="~@/assets/yuanimg/sousuobutton.png" alt=""
                    style="margin-left:6px;cursor: pointer;height: 2rem;" @click="bisualiBtn">
                </el-col>

              </el-col>
            </el-row>
            <div v-if="selectNumLeft == 0 && loadList" v-loading="loading" class="treeList"
              element-loading-background="rgba(0, 0, 0, 0.4)">
              <el-tree :data="dataZtree" :check-strictlt="true" :props="defaultProps" :expand-on-click-node="false"
                @node-click="handleNodeClick">
                <span slot-scope="{node,data}">
                  <span>
                    {{ data.Addvnm }} ( {{ data.Total }} )
                  </span>
                </span>
              </el-tree>
            </div>
            <!-- <div class="tableListBox"  v-show="selectNumLeft==0">
              <div class="titleList" style="margin-bottom: 4px;">
                <span style="width: 20%;">序号</span>
                <span style="width: 80%;">预案名称</span>
              </div>
              <div class="visuliiSpan">
                <ul>
                  <li v-for="(item, index) in listTable" :key="index" :class="{ tableBgList: selectNumLi == index }" class="liStyle">
                    <span>{{ item.rn }}</span>
                    <span @click.stop="listTableClick(item, index)">{{ item.addvnm }}山洪灾害村级预案</span>
                    <span v-if="item.wordPath" @click.stop="listTabletoword(item)">
                      <i class="el-icon-document" />
                    </span>
                  </li>
                  <infinite-loading ref="infiniteLoading" :distance="50" @infinite="infiniteHandler">
                    <span slot="no-more"> &nbsp; &nbsp; </span>
                    <template v-if="listTable.length <= 0">
                      <div slot="no-results" class="noData">当前无预案</div>
                    </template>
                    <div v-else slot="no-results"> &nbsp; &nbsp;</div>
                  </infinite-loading>
                </ul>
              </div>
            </div> -->
            <!-- === -->
            <div v-if="selectNumLeft == 0 && loadList" class="tabel_common tabel_commons">
              <div class="table">
                <div class="thead">
                  <div class="tr">
                    <div class="th" style="flex:1 !important"> 序号 </div>
                    <div class="th" style="flex:2 !important"> 预案名称 </div>
                    <div class="th" style="flex:1 !important"> </div>
                  </div>
                </div>
                <el-scrollbar style="height:35vh; width: 100%;" class="el_scrollbar">
                  <div class="tbody">
                    <div class="tr" v-for="(item, index) in listTable" :key="index"
                      @click.stop="listTableClick(item, index)" :class="['tr', selectNumLi == index ? 'ta' : '']">
                      <!-- <div class="td" style="flex:1 !important"> {{ item.rn }} </div> -->
                      <div class="td" style="flex:1 !important"> {{ index + 1 }} </div>
                      <!-- <div class="td" style="flex:2 !important" @click.stop="listTableClick(item, index)"> {{ item.addvnm
                      }}山洪灾害村级预案 </div> -->
                      <div class="td" style="flex:2 !important" @click.stop="listTableClick(item, index)"> {{ item.addvnm
                      }} </div>
                      <div class="td" style="flex:1 !important"> <img src="~@/assets/yuanimg/wenjian.png" alt=""
                          v-if="item.wordPath" @click.stop="listTabletoword(item)"></div>
                    </div>
                    <infinite-loading ref="infiniteLoading" :distance="50" @infinite="infiniteHandler">
                      <span slot="no-more"> &nbsp; &nbsp; </span>
                      <template v-if="listTable.length <= 0">
                        <div slot="no-results" class="noData" style="background-position: center 78%;padding-top: 60%;">
                          当前无预案</div>
                      </template>
                      <div v-else slot="no-results"> &nbsp; &nbsp;</div>
                    </infinite-loading>
                  </div>
                </el-scrollbar>
              </div>
            </div>
            <!-- 预演预案管理 -->
            <div v-if="selectNumLeft == 1 && loadList">
              <!-- <PrePlanRehearsalManagement></PrePlanRehearsalManagement> -->
              <div v-if="loadList && loadList" v-loading.fullscreen.lock="fullscreenLoadingIndex"
                element-loading-background="rgba(0, 0, 0, 0.4)">
                <div v-if="loadList && loadList" class="form_Rehearsal">
                  <el-form ref="ruleForm" label-width="auto" label-position="left">
                    <el-form-item label="预演类别">
                      <el-radio-group v-model="ruleForm.rehearsalType" class="margtop5">
                        <el-radio label="1" @click.native.prevent="rehearsalTypechange('1')">预报预演
                        </el-radio>
                        <el-radio label="2" @click.native.prevent="rehearsalTypechange('2')">历史复盘
                        </el-radio>
                        <el-radio label="3" @click.native.prevent="rehearsalTypechange('3')">极端情景
                        </el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="隐患类别">
                      <el-radio-group v-model="ruleForm.hiddendangertype" class="margtop5">
                        <el-radio label="1" @click.native.prevent="hiddendangertypechange('1')">桥梁堵水
                        </el-radio>
                        <el-radio label="2" @click.native.prevent="hiddendangertypechange('2')">工程溃决
                        </el-radio>
                        <el-radio label="3" @click.native.prevent="hiddendangertypechange('3')">洪水顶托
                        </el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-form>

                  <el-form ref="ruleForm" label-width="auto" label-position="top">
                    <el-form-item label="生成时间">
                      <el-date-picker v-model="TimeShengcheng" prefix-icon="el-icon-date" type="datetimerange"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%"
                        format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" :default-time="[timebeg, timebeg]"
                        @change="TimeShengchengChange" />
                    </el-form-item>
                    <el-form-item label="预演时间">
                      <el-date-picker v-model="TimeYuyan" prefix-icon="el-icon-date" type="datetimerange"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%"
                        format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" :default-time="[timebeg, timebeg]"
                        @change="TimeYuyanChange" />
                    </el-form-item>
                  </el-form>
                </div>
                <div class="collapse_table">
                  <ul>
                    <!-- <li
                      v-for="(item, index) in listYudata"
                      :key="index"
                      :class="{ activeList: ManagementSelectNum == index }"
                      @click="ListStyle(item, index)"
                    > -->
                    <li v-for="(item, index) in listYudata" :key="index"
                      :class="{ activeList: ManagementSelectNum == index }">
                      <div class="collapse_table_title">
                        <p :title="item.name">{{ item.name }}</p>
                        <span v-if="item.calculationState == -1" class="errorColor">计算失败</span>
                        <span v-if="item.calculationState == 0" class="noColor">未计算</span>
                        <span v-if="item.calculationState == 1" class="orangeColor">计算中</span>
                        <span v-if="item.calculationState == 2" class="greenColor">计算完成</span>
                      </div>
                      <p>预演类别：<span>{{ item.rehearsalType }}</span></p>
                      <p>隐患类型：<span>{{ item.hiddendangertype || '无' }}</span></p>
                      <p>预演时段：<span style="letter-spacing:-1px">{{
                        item.predictionStart | dateformat
                      }} - {{ item.predictionEnd | dateformat }}</span></p>
                      <p style="border-bottom:1px solid #335875">生成时间：<span>{{ item.createDDate | dateformat }}</span></p>
                      <div class="btnCjfa_cur">
                        <!-- <span class="btnCjfa" @click.stop="getDeleteRehearsal(item)"> -->
                        <span class="btnCjfa" @click.stop="openTipDialog(item)">
                          <!-- <i class="el-icon-delete" /> 删除 -->
                          <img src="@/assets/uemap/Rehearsal_sc.png" width="84" height="30">
                        </span>
                        <span v-if="item.calculationState == 0" class="btnCjfa" @click.stop="CalcRehearsalSchemeli(item)">
                          <!-- <i class="el-icon-setting" /> 计算 -->
                          <img src="@/assets/uemap/Rehearsal_js.png">
                        </span>
                        <span v-if="item.calculationState == 2" class="btnCjfa" @click.stop="btnPreview(item, index)">
                          <!-- <i class="el-icon-video-play" /> 加载方案 -->
                          <img src="@/assets/uemap/Rehearsal_fa.png">
                        </span>
                      </div>
                    </li>
                    <infinite-loading ref="infiniteLoading" @infinite="infiniteHandlerMore">
                      <span slot="no-more"> &nbsp; </span>
                      <template v-if="listYudata.length <= 0">
                        <div slot="no-results" class="noData">当前无预演</div>
                      </template>
                      <div v-else slot="no-results">&nbsp;</div>
                    </infinite-loading>
                  </ul>
                </div>
              </div>
            </div>
            <div v-if="!loadList" v-loading.fullscreen.lock="fullscreenLoadingIndex"
              element-loading-background="rgba(0, 0, 0, 0.4)">
              <div>
                <Faxq ref="faxqRef" :pageName="'yuyan'" />
                <div class="btm_faxq">
                  <span class="btnCjfa" @click="withdraw">
                    <!-- 退出方案 -->
                    <img src="@/assets/yuanimg/backbtn.png" height="30">
                  </span>
                  <span class="btnCjfa" @click="exportBtn">
                    <!-- 导出报告 -->
                    <img src="@/assets/yuanimg/exportbtn.png" height="30">
                  </span>
                </div>
              </div>
            </div>
          </template>

        </Frame>
      </template>
      <template v-slot:right>
        <Frame v-if="loadList && infoTrue && selectNumLeft == 0" title="预案详情" :panel-stretch="'rights'"
          style="height: 100%">
          <template v-slot:body>
            <div class="tab">
              <span v-for="(item, index) in tabTitNewList" :key="index"
                :class="{ activeTab: selectNum == item.ind, tabwid50: !taboneflg }" class="tabTit"
                @click="change(item.ind)">
                {{ item.titName }}
              </span>
            </div>
            <div v-show="selectNum == 0" class="water-table">
              <riskgrid />
            </div>
            <div v-show="selectNum == 1" class="water-table">
              <organizational />
            </div>
            <div v-show="selectNum == 2" class="water-table">
              <structured />
            </div>
          </template>
        </Frame>
        <!-- 右侧加载方案详情 -->
        <!-- <Frame v-if="!loadList " :title="nameInfoTop + '详情'" style="height: 100%" :panelStretch="'rights'"> -->
        <Frame v-if="!loadList" :title="nameInfoTop + '详情'" style="height: 100%" :panelStretch="'rights'">
          <template v-slot:body>
            <div class="tab">
              <span v-for="(item, index) in tabTitList2" :key="index" :class="{ activeTab: tabTitListNum == index }"
                class="tabTit" @click="changeRight(index)">
                {{ item }}
              </span>
            </div>
            <div v-show="tabTitListNum == 0" class="water-table">
              <rainwater ref="showRainwater" />
            </div>
            <div v-show="tabTitListNum == 1" class="water-table">
              <contrastinfo ref="showContrastinfo" />
            </div>
            <div v-show="tabTitListNum == 2" class="water-table">
              <defense ref="showDefense" />
            </div>
          </template>
        </Frame>
        <!-- 右侧加载方案详情 end -->
      </template>
    </FrameLayout>
    <Dlgdivv v-if="this.$store.getters.dlgParams.name == 'FZCCuZINFO'" :title="false" mask class="DlgStyle">
      <template v-slot:title>详情</template>
      <template v-slot:body>
        <Dlgyyfxd :list-styleobj="{}" :tablist="[]" />
      </template>
    </Dlgdivv>
    <Dlgdiv v-if="this.$store.getters.dlgParams.name === 'floodDlog'" mask class="MeasuredDlgStyle">
      <template v-slot:body>
        <floodDlog />
      </template>
    </Dlgdiv>
    <Dlgdivv v-if="this.$store.getters.dlgParams.name === 'DLGYYFXD'" mask class="DlgStyle">
      <template v-slot:title>详情</template>
      <template v-slot:body>
        <!-- <dlgyyfxd :listStyleobj="ListStyleobj" :tablist="[0]" /> -->
        <dlgyyfxd :listStyleobj="ListStyleobj" :tablist="['6']" />
      </template>
    </Dlgdivv>
    <!-- <Dlgdivv v-if="this.$store.getters.dlgParams.name == 'FZCCuZINFO'" :title="false" mask class="MeasuredDlgStyle">
      <template v-slot:title>详情</template>
      <template v-slot:body>
        <Dlgyyfxd :tablist="tablists" />
      </template>
    </Dlgdivv> -->
    <!-- ^^^此处详情Dlgdivv为加入预演预案管理后的 -->

    <!-- 删除提示 -->
    <DlgdivTip v-if="tipDialogShow" :ismask="true">
      <template v-slot:title> 删除提示 </template>
      <template v-slot:body>
        <div class="body-inner">
          <p class="contant">确定要删除该方案吗？</p>
        </div>
      </template>
      <template v-slot:footer>
        <div class="btn-row">
          <div class="btn" @click="cancelTipDialog">
            <img src="@/assets/dialog/tipCancel.png" alt="">
          </div>
          <div class="btn" @click="confirmTipDialog">
            <img src="@/assets/dialog/tipSubmit.png" alt="">
          </div>
        </div>
      </template>
    </DlgdivTip>
  </div>
</template>
<script>
import { PlanStatisticsByAddvcd, GetPlanListByAdcd } from '../../../api/xuna.js'
import organizational from '../reserveplan/organizational.vue'
import structured from '../reserveplan/structured.vue'
import riskgrid from '../reserveplan/riskgrid.vue'
import riskgridNew from '../reserveplan/riskgridNew.vue'
import PrePlanRehearsalManagement from '../reserveplan/PrePlanRehearsalManagement.vue'
import {
  mapGetters
} from 'vuex'
// 预案管理
import {
  GetRLList,
  DeleteRehearsal,
  CalcRehearsalScheme,
  GetRehearsalState
} from '@/api/xuna.js'
import hiddenDanger from '../../../map/cesium/mixins/hiddenDanger'

import Faxq from '../Rehearsal/schemeDetailsFaxq.vue'
import rainwater from '../reserveplan/rainwater.vue'
import contrastinfo from '../reserveplan/contrastinfo.vue'
import defense from '../reserveplan/defense.vue'
import dlgyyfxd from '@/views/components/dlgyyfxd.vue'
import floodDlog from '@/views/components/floodDlog.vue'

export default {
  components: {
    organizational,
    structured,
    riskgrid,
    riskgridNew,
    PrePlanRehearsalManagement,
    Faxq,
    rainwater,
    contrastinfo,
    defense,
    dlgyyfxd,
    floodDlog
  },
  mixins: [hiddenDanger],
  data() {
    return {
      dataCountNum: '',
      formRule: {
        wswscd: '',
        addvcd: '',
        page: '1',
        limt: '10',
        adnm: ''
      },
      tabTitList: ['入户调查', '组织架构', '结构化预案'], // 风险调查 风险网格
      tabTitListNew: [// 入户调查根据数据是否有进行展示隐藏
        { 'titName': '入户调查', ind: 0, 'showflg': true },
        { 'titName': '组织架构', ind: 1, 'showflg': true },
        { 'titName': '结构化预案', ind: 2, 'showflg': true }
      ],
      leftTopList: [// 左侧面板tab
        { 'titName': '预案可视化', ind: 0, 'showflg': true },
        { 'titName': '预演预案管理', ind: 1, 'showflg': true }
      ],
      infoTrue: false,
      dataZtree: [], // 树
      defaultProps: {
        children: 'Child',
        label: 'Addvnm'
      },
      listTable: [],
      selectNum: 0,
      loading: false,
      selectNumLi: '-1',
      listIdBus: '',
      listIdBuss: '',
      clicknum: 0,
      taboneflg: true,

      selectNumLeft: 0,

      // 预演预案管理
      loadList: this.$store.getters.IsloadList,
      showPage: 'index',
      RehearsalState: '0',
      showCompontframe: false,
      fullscreenLoadingIndex: false,
      tabTitList2: ['雨水情', '对照信息', '防御建议'],  //注意
      tabTitListNum: 0,
      detailsd: '',
      timebeg: this.$moment().format('HH:mm:ss'),
      ruleForm: {
        page: 1,
        limit: 10,
        wswscd: this.$store.getters.basin,
        rehearsalType: '', // 预演类别 1预报预演、2历史复盘、3极端情景
        hiddendangertype: '', // 隐患类别 1桥梁堵水、2工程溃决、3洪水顶托
        createStart: this.$moment().subtract(30, 'days').format('YYYY-MM-DD HH:mm'), // 生成开始时间
        createEnd: this.$moment().format('YYYY-MM-DD HH:mm'), // 生成结束时间
        rehearsalStart: this.$moment().subtract(8, 'hour').format('YYYY-MM-DD HH:mm'), // 预演开始时间
        rehearsalEnd: this.$moment().format('YYYY-MM-DD HH:mm')// 预演结束时间
      },
      ManagementSelectNum: '-1', //注意
      showCompont: '0',
      TimeShengcheng: [this.$moment().subtract(30, 'days').format('YYYY-MM-DD HH:mm'), this.$moment().format(
        'YYYY-MM-DD HH:mm')],
      TimeYuyan: [this.$moment().subtract(8, 'hour').format('YYYY-MM-DD HH:mm'), this.$moment().format(
        'YYYY-MM-DD HH:mm')],
      listYudata: [], // 列表
      nameInfoTop: '',
      planCurrSel: {},
      loadId: '',
      isRightTab: false,
      isRightTab1: false,
      isRightTab2: false,
      ListStyleobj: {
        'stTime': '',
        'enTime': '',
      },
      tablists: [],
      tipDialogShow: false, //删除弹窗
      faId: undefined, //方案id
    }
  },
  computed: {
    tabTitNewList: function () {
      return this.tabTitListNew.filter((item) => {
        return item.showflg
      })
    },
    // ...mapGetters({
    //   basin: 'basin'
    // })
    basin() {
      return this.$store.getters.basin
    },
    IsloadList() {
      return this.$store.getters.IsloadList
    }

  },
  watch: {
    // 'basin': {
    //   immediate: true,
    //   deep: true,
    //   handler(val) {
    //     this.formRule.wswscd = val
    //     this.formRule.addvcd = ''
    //     this.getPlanStatisticsByAddvcd()
    //     this.resetList()
    //   }
    // }
    basin: {
      immediate: true,
      deep: true,
      handler: function (name) {
        this.$nextTick(() => {
          this.formRule.wswscd = name
          this.formRule.addvcd = ''
          this.getPlanStatisticsByAddvcd()
          this.resetList()
          // 预案管理
          this.ruleForm.wswscd = name
          this.resetListPlanManagement()
        })
        this.withdraw()
      },
    },
    IsloadList: {
      immediate: true,
      deep: true,
      handler(val) {
        this.loadList = val
      }
    }

  },
  beforeDestroy() {
    this.$eventBus.$off('FZCINFO')
    this.withdraw()
    this.$store.getters.pageState.planId = '';
  },
  created() {

    // this.getPlanStatisticsByAddvcd()
    // 使用 lodash 的 throttle 节流
    // this.bisualiBtn = this._lodash.throttle(this.bisualiBtns,500,false)
    this.$store.dispatch('rightFold', true)
    if (this.$route.params.isflg) {
      this.btnPreview(this.$route.params)
    }
    this.$store.commit("ISYUYANYAGL", false);
  },
  mounted() {
    this.$eventBus.$on('FZCINFO', res => {
      this.$store.getters.dlgParams.params = {
        'Ewcode': res.ADCD,
        'strBegin': '',
        'strEnd': '',
        'stcd': ''
      }
      this.$store.getters.dlgParams.name = 'FZCCuZINFO'

    })

    this.$eventBus.$on('FZCINFO', res => {
      let ind = this.ManagementSelectNum;
      let lit = this.listYudata;
      let arlit = {};
      if (ind != '-1') {
        this.tablists = ['5'];
        arlit = lit[ind];
      } else {
        this.tablists = []
      }

      let stbeigin = arlit.predictionStart ? this.$moment(arlit.predictionStart).format('YYYY-MM-DD HH:mm') : '';
      let stend = arlit.predictionEnd ? this.$moment(arlit.predictionEnd).format('YYYY-MM-DD HH:mm') : '';
      let params = {
        'Ewcode': res.ADCD,
        'strBegin': stbeigin,
        'strEnd': stend,
      };
      // console.log(params)
      this.$store.getters.dlgParams.params = params;
      this.$store.getters.dlgParams.name = 'FZCCuZINFO'
      this.$store.getters.pageState.planId = '';
    })
  },
  methods: {

    // =========预演预案管理 start==========
    // 右侧切换
    changeRight(index) {
      // console.log(index)
      this.tabTitListNum = index
      this.$store.getters.pageState.yuAn_YYYA_Right_Type = index
      if (index === 0 && this.isRightTab === false) {
        this.$refs.showRainwater.getGetRehearsalPZ(this.loadId)
        this.isRightTab = true
      } else if (index === 1 && this.isRightTab1 === false) {
        this.$refs.showContrastinfo.getGetRehearsalWarning(this.loadId)
        this.isRightTab1 = true
      } else if (index === 2 && this.isRightTab2 === false) {
        this.$refs.showDefense.getGetRiskDrowningList(this.loadId)
        this.isRightTab2 = true
      }
    },
    TimeShengchengChange(val) {
      this.ruleForm.createStart = val[0]
      this.ruleForm.createEnd = val[1]
      this.TimeShengcheng = val
      this.resetListPlanManagement()
    },
    TimeYuyanChange(val) {
      this.ruleForm.rehearsalStart = val[0]
      this.ruleForm.rehearsalEnd = val[1]
      this.TimeYuyan = val
      this.resetListPlanManagement()
    },
    rehearsalTypechange(e) {
      e === this.ruleForm.rehearsalType ? (this.ruleForm.rehearsalType = '') : (this.ruleForm.rehearsalType = e)
      this.resetListPlanManagement()
    },
    hiddendangertypechange(e) {
      e === this.ruleForm.hiddendangertype ? (this.ruleForm.hiddendangertype = '') : (this.ruleForm.hiddendangertype = e)
      this.resetListPlanManagement()
    },
    // 加载更多预演预案
    infiniteHandlerMore($state) {
      this.getGetRLList($state)
    },
    // 重置 预演预案管理
    resetListPlanManagement() {
      this.ruleForm.page = 1
      this.listYudata = []
      this.$nextTick(() => {
        this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset')
      })
    },
    // 加载方案
    btnPreview(item, ind) {
      if (!item.id) {
        return
      }
      this.ManagementSelectNum = ind;
      console.log("加载方案", item);
      this.loadId = item.id
      this.$nextTick(() => {
        this.$refs.faxqRef.faxqID = item.id
        this.$refs.faxqRef.getSelRehearsal()
        // this.$refs.faxqRef.echarresize(2)
        this.$refs.faxqRef.clientWidth(2)
        this.$refs.showRainwater.getGetRehearsalPZ(this.loadId)
      })
      this.$store.dispatch('rightFold', false) //涉及
      this.nameInfoTop = item.name  //涉及
      // this.loadList = false //涉及
      this.$store.commit("ISLOADLIST", false);
      this.$store.getters.pageState.yuAn_YYYA_Load = false //涉及
      this.$store.getters.pageState.planId = item.id;
      this.ListStyleobj.stTime = this.$moment(item.predictionStart).format('YYYY-MM-DD HH:mm')  //涉及
      this.ListStyleobj.enTime = this.$moment(item.predictionEnd).format('YYYY-MM-DD HH:mm')  //涉及

      // 保存所选预演方案的状态
      this.$store.commit("YUANCALCULATIONSTATE", item.calculationState);
    },
    // 获取列表
    getGetRLList($state) {
      this.fullscreenLoadingIndex = true
      GetRLList(this.ruleForm).then((res) => {
        this.fullscreenLoadingIndex = false
        if (res.isSuccess) {
          this.ManagementSelectNum = -1
          if ($state) {
            if (!res.data.length > 0) {
              this.planCurrSel = {}
              this.$store.dispatch('rightFold', true)
              $state.complete() // 加载完成的状态
            } else {
              const arr = res.data
              this.listYudata = [...this.listYudata, ...arr]
              if (res.data.length < this.ruleForm.limit) {
                $state.complete() // 加载完成的状态
              } else {
                $state.loaded() // 加载中的状态
              }
            }
            this.ruleForm.page++
          } else {
            this.listYudata = res.data
          }
        }
      }).catch(err => {
        this.fullscreenLoadingIndex = false
      })
    },
    // 删除
    getDeleteRehearsal(item) {
      this.$confirm('确定删除此方案?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteRehearsal({ id: item.id }).then((res) => {
          console.log(res)
          if (res.isSuccess) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.resetList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 计算
    CalcRehearsalSchemeli(item) {
      this.listYudata = this.listYudata.map(function (v) {
        return {
          ...v,
          calculationState: item.id === v.id ? '1' : v.calculationState
        }
      })
      CalcRehearsalScheme({ RehearsalID: item.id }).then((res) => {
        if (res.isSuccess) {
          this.getGetRehearsalState(item.id)
        }
      })
    },
    getGetRehearsalState(id) {
      GetRehearsalState({ ID: id }).then((res) => {
        this.RehearsalState = res.data
        if (res.data !== 2 || !res.isSuccess) {
          setTimeout(() => {
            this.getGetRehearsalState(id)
          }, 10000)
        } else {
          this.$message({
            type: 'success',
            message: '计算成功'
          })
          this.resetList()
        }
      })
    },
    // 退出方案
    withdraw() {
      this.$store.commit("ISLOADLIST", true);
      // this.loadList = true
      this.$store.getters.pageState.yuAn_YYYA_Load = true
      this.isRightTab = false
      this.isRightTab1 = false
      this.isRightTab2 = false
      this.tabTitListNum = 0;
      this.ManagementSelectNum = -1;
      this.$store.dispatch('rightFold', true); //涉及
      this.ListStyleobj.stTime = ''; //涉及
      this.ListStyleobj.enTime = ''; //涉及
      this.$store.getters.pageState.planId = '';

      this.$store.commit("YUANCALCULATIONSTATE", undefined);

    },
    exportBtn() {
      const { href } = this.$router.resolve({ path: '/reserveplan/reserveplanReport?basin=' + this.basin + '&id=' + this.loadId })
      window.open(href, '_blank')
    },

    ListStyle(item, index) {
      this.ListStyleobj = {
        'stTime': this.$moment(item.predictionStart).format('YYYY-MM-DD HH:mm'),
        'enTime': this.$moment(item.predictionEnd).format('YYYY-MM-DD HH:mm')
      }


      if (item.calculationState === 2) {
        this.nameInfoTop = item.name
        this.showCompont = 2
        this.showCompontframe = true
        this.ManagementSelectNum = index
        this.planCurrSel = item
        this.loadId = item.id
        this.$store.getters.pageState.planId = item.id
        this.$nextTick(function () {
          this.$eventBus.$emit('schemeFxId', item.id, item.name)
        })
        this.$store.dispatch('rightFold', false)
      } else {
        this.showCompontframe = false
        this.ManagementSelectNum = index
      }
    },

    // =========预演预案管理 end==========
    bisualiBtn() {
      // 使用全局 _lodash 的throttle 方法 ；this 指向问题
      this._lodash.throttle(function filterTags() {
        this.bisualiBtns()
      }, 500, false).call(this)
    },
    bisualiBtns() {
      if (this.clicknum > 0) return
      this.clicknum++
      setTimeout(() => {
        this.clicknum = 0
      }, 500)
      this.formRule.addvcd = ''
      this.getPlanStatisticsByAddvcd()
      this.resetList()
    },
    change(index) {
      // console.log('change event')
      this.selectNum = index
      this.$nextTick(function () {
        this.$eventBus.$emit('organFd', { id: this.listIdBus, num: index, addvcd: this.listIdBuss.addvcd })
      })
    },
    LeftChange(index) {
      // console.log('change event')
      switch (index) {
        case 0:
          this.$store.commit("ISYUYANYAGL", false);
          break;
        case 1:
          this.$store.commit("ISYUYANYAGL", true);
          break;
        default:
          break;
      }
      this.selectNumLeft = index
    },
    // 加载更多
    infiniteHandler($state) {
      this.getGetPlanListByAdcd($state)
    },
    // 重置
    resetList() {
      this.formRule.page = 1
      this.listTable = []
      this.$nextTick(() => {
        this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset')
      })
    },
    handleNodeClick(data) {
      // 快速多次点击会导致多次触发 设置500毫秒内点击不请求数据
      if (this.clicknum > 0) return
      this.clicknum++
      setTimeout(() => {
        this.clicknum = 0
      }, 500)
      this.formRule.addvcd = data.Addvcd
      this.resetList()
    },
    // 树
    getPlanStatisticsByAddvcd() {
      this.loading = true
      PlanStatisticsByAddvcd({ wswscd: this.formRule.wswscd, adnm: this.formRule.adnm }).then((res) => {
        // console.log(res)
        this.loading = false
        this.dataZtree = res.data
        this.dataCountNum = res.dataCount
      })
    },
    //  列表
    getGetPlanListByAdcd($state) {
      // alert(this.formRule.page)
      GetPlanListByAdcd(this.formRule).then((res) => {
        if ($state) {
          if (!res.data.length > 0) {
            $state.complete() // 加载完成的状态
            if (!this.listTable.length) {
              this.$store.dispatch('rightFold', true)
              this.infoTrue = false
              this.selectNumLi = '-1'
            }
          } else {
            const arr = res.data
            if (this.listTable.length == 0) {
              this.listIdBuss = res.data[0]
              this.listIdBus = res.data[0].id
              // 判断入户调查是否有数据
              this.tabonflgfn(res.data[0])
              this.$nextTick(function () {
                this.$eventBus.$emit('organFd', { id: res.data[0].id, num: this.selectNum, addvcd: res.data[0].addvcd, 'taboneflg': this.taboneflg })
              })
            }
            this.listTable = [...this.listTable, ...arr]
            if (res.data.length < this.formRule.limt) {
              $state.complete() // 加载完成的状态
            } else {
              $state.loaded() // 加载中的状态
            }
            if (this.listTable.length === 1) {
              this.$eventBus.$emit('flyToFZC', this.listTable[0])
            }
            this.infoTrue = true
            this.selectNumLi = 0
            this.$store.dispatch('rightFold', false)

            this.$store.commit("YUANCALCULATIONSTATE", res.data[0].calculationState);
          }
          this.formRule.page++
        } else {
          this.listTable = res.data
          if (this.listTable.length === 1) {
            this.$eventBus.$emit('flyToFZC', this.listTable[0])
          }
        }
      })
    },
    // 山洪灾害预案列表点击
    listTableClick(item, index) {
      this.$eventBus.$emit('flyToFZC', item)
      this.selectNumLi = index
      this.infoTrue = true
      this.listIdBus = item.id;
      this.listIdBuss = item;
      // 判断入户调查是否有数据
      this.tabonflgfn(item)
      this.$nextTick(function () {
        this.$eventBus.$emit('organFd', { id: item.id, num: this.selectNum, addvcd: item.addvcd, 'taboneflg': this.taboneflg })
      })
      this.$store.dispatch('rightFold', false)
    },
    tabonflgfn(item) { // 判断第一个入户调查有数据展示 没有屏蔽
      // 判断第一个 入户调查是否展示 total 0 不展示  大于0 展示
      this.taboneflg = !(item.total <= 0)
      if (!this.taboneflg) { //
        this.selectNum = this.selectNum ? this.selectNum : 1
        this.tabTitListNew[0].showflg = false
      } else {
        this.tabTitListNew[0].showflg = true
        this.selectNum = 0
      }
    },
    listTabletoword(item) {
      const utls = item.wordPath
      window.open(utls, '_blank')
    },
    // 删除提示操作
    // 打开
    openTipDialog(item) {
      this.faId = item.id
      this.tipDialogShow = true
    },
    // 确认删除方案
    confirmTipDialog() {
      DeleteRehearsal({ id: this.faId }).then((res) => {
        //  console.log(res)
        if (res.isSuccess) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.resetList()
        }
      }).catch(() => { })

      this.resetList()
      this.tipDialogShow = false
    },
    // 取消删除方案
    cancelTipDialog() {
      this.$message({
        type: 'info',
        message: '已取消删除'
      })
      this.tipDialogShow = false
    },

    // 关闭删除提示弹窗
    closeTipDialog() {
      this.tipDialogShow = false
    },
  }

}
</script>

<style lang="less" scoped>
/deep/ .el-input-group__append {
  background-color: #409eff !important;
  border-color: #fff !important;
  color: #fff !important;
}

.section-box {
  height: 100%;
  position: relative;
}

.visuliiSpan {
  display: flex;
  width: 100%;
  height: 90%;
  overflow: auto;

  ul {
    width: 100%;

    li {
      span {
        text-align: center;
        display: inline-block;
        padding: 5px 0;
        font-size: 12px;
        border-bottom: 1px solid #666;

        &:nth-child(1) {
          width: 20%;
        }

        &:nth-child(2) {
          width: 70%;
          cursor: pointer;
        }

        &:nth-child(3) {
          width: 10%;
          cursor: pointer;
        }
      }
    }
  }
}

/deep/ .el-tree,
/deep/ .el-tree-node__content:hover,
/deep/ .el-upload-list__item:hover {
  background: none;
  color: #fff;
  font-size: 12px;
}

/deep/ .is-current>.el-tree-node__content,
/deep/ .el-tree-node:focus>.el-tree-node__content {
  //background-color: rgba(40, 96, 158, .4) !important;
  //background: rgba(0,186,255,0.4)!important;
  background: linear-gradient(90deg, #00EAFF 0%, rgba(1, 39, 85, 0) 100%) !important;

}

.treeList {
  //border: 1px solid #666;
  background: rgba(0, 7, 35, 0.6);
  padding: 10px;
  height: 30%;
  overflow: auto;
  margin: 10px 0;
}

.tableListBox {
  height: 58%;
  overflow: hidden;
}

.tab {
  justify-content: center;
}

.tab .tabTit {
  padding: 0;
  width: 33%;
}

//.tab .tabwid50 {
//  width: 50%;
//}

.water-table {
  height: 93%;
  height: 700px;
}

.visualizationLeftTitle {
  background: url('~@/assets/imgNew/littletitle_icon.png') no-repeat;
  background-size: 100% 60%;
  background-position-y: bottom;
  line-height: 30px;
  height: 40px;
  color: #fff;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: bold;
}

.yyTotalNum {
  background: url('~@/assets/yuanimg/zhuangshiukuang.png') no-repeat;
  background-size: 100% 100%;
  height: 34px;
  line-height: 34px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
  text-align: center;
  margin-bottom: 6px;

  span {
    font-size: 18px;
    font-family: DIN;
    font-weight: bold;
    color: #FFFFFF;
  }

}

.liStyle {
  background: rgba(0, 150, 255, 0.3);
}

//预案管理
.btm_faxq {
  //text-align: right;
  //width: 100%;
  //margin-top: 10px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  bottom: 10px;
  display: flex;
  align-items: center;

  .btnCjfa {
    //padding: 10px;
    margin: 0 5px;
  }
}

.MeasuredDlgStyle {
  width: 70% !important;
  height: 700px !important;
  left: 15%;
  top: 5%
}

.DlgStyle {
  width: 70% !important;
  height: 700px !important;
  left: 15%;
  top: 0%
}

//.section-box {
//  width: 100%;
//  height: 100%;
//}

.top_llfxChart {
  height: 300px;
  margin-bottom: 10px;
}

.tableBox {
  height: calc(100% - 320px);

  .collapse_div {
    height: calc(100% - 20px);
    overflow: auto;
  }
}

.form_Rehearsal {
  border-bottom: 2px solid #335875;

  .el-form-item {
    margin-bottom: 5px;

    /deep/.el-radio-group {
      width: 83%;
      display: flex;
      justify-content: space-between;

      label {
        width: 30%;
        margin-right: 0;
      }
    }
  }

  /deep/ .el-radio-button__inner {
    padding: 10px 20.5px !important;
  }

  /deep/.is-disabled .el-radio__inner {
    background-color: transparent;
  }
}

.collapse_table>ul li .collapse_table_title {
  //height: 50px;
  //line-height: 50px;
  height: 32px;
  line-height: 32px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #00A0DB;

  p {
    width: 70%;
    color: #FFE957;
    font-size: 16px;
    font-weight: bold;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  span {
    padding: 5px;
    border-radius: 5px;
    height: 20px;
    line-height: 20px;
    margin-right: 2px;
    letter-spacing: -2px;
    clip-path: polygon(22% 0, 80% 0%, 100% 0, 97% 100%, 80% 100%, 20% 100%, 0 100%, 0 31%);
  }
}

.orangeColor {
  color: #E3D400;
}

.greenColor {
  color: #00E344;
}

.noColor {
  color: #989595;
}

.errorColor {
  color: #db8282;
}

.btnCjfa_cur {
  text-align: right;
  padding-top: 10px;
  border-top: 1px solid #00A0DB;

  .btnCjfa {
    padding: 5px 10px;
    top: 0;
    margin: 0 5px;
  }
}

.margtop5 {
  margin-top: 5px;
}

/deep/ .el-tree__empty-text {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  background: url(~@/assets/newimg/notAvailableData.png) no-repeat;
  background-position: center 85%;
  background-size: auto;
  padding-top: 85%;
}
</style>
<style lang="scss" scoped>
.yyLegendLeftGourp {
  position: absolute;
  left: 19.5%;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  z-index: 3;
}

.btn-center-bottom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  bottom: 0px;
  display: flex;
  align-items: center;

  .btn {
    white-space: nowrap;
    height: 39px;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background: rgba(14, 81, 133, 0.61);
    border: 1px solid #0e5185;

    &:hover,
    &.active {
      box-shadow: rgb(11, 234, 235) 0px 0px 8px inset;
    }

    &.disabled {
      background: #000000;
      color: #cccccc;
      pointer-events: none;
    }
  }
}
</style>